<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/modules/laydate/default/laydate.css"/>

    <link rel="stylesheet" href="../assets/custom/css/filter_page.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
    <div class="selectData">
        <div class="tab-content">
          <div class="tab-pane fade active in" id="tab_2_1">
              <div class="selectData_nav">
                  <div class="nav_Filter"><i class="fa fa-filter"></i> 筛选</div>
                  <div class="nav_Query" ><button class ="btn blue-hoki">查询</button></div>
                  <div class="nav_Sql"><button class="btn blue-madison">打开SQL查询</button></div>
              </div>
              <div class="selectData_filter">
                  <div class="field_items"></div>
                  <div class="field_tools">
                      <a href="javascript:;" class="field_toolsAdd"> &lt;添加&gt;</a>
                      <a href="javascript:;" class="field_toolsUp"> &lt;上移&gt;</a>
                      <a href="javascript:;" class="field_toolsDown"> &lt;下移&gt;</a>
                      <a href="javascript:;" class="field_toolsUse"> &lt;应用(Ctrl+R)&gt;</a>
                  </div>
              </div>
              <div id="expander"></div>
              <div class="selectData_table">
                  <table class="layui-hide" id="test"></table>
              </div>
          </div>

          <div class="tab-pane fade" id="tab_2_2">
                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form action="#" class="form-horizontal form-row-seperated">
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">First Name</label>
                                <div class="col-md-9">
                                    <input type="text" placeholder="small" class="form-control" />
                                    <span class="help-block"> This is inline help </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Last Name</label>
                                <div class="col-md-9">
                                    <input type="text" placeholder="medium" class="form-control" />
                                    <span class="help-block"> This is inline help </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Gender</label>
                                <div class="col-md-9">
                                    <select class="form-control">
                                        <option value="">Male</option>
                                        <option value="">Female</option>
                                    </select>
                                    <span class="help-block"> Select your gender. </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Date of Birth</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" placeholder="dd/mm/yyyy"> </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Category</label>
                                <div class="col-md-9">
                                    <select class="form-control">
                                        <option value="Category 1">Category 1</option>
                                        <option value="Category 2">Category 2</option>
                                        <option value="Category 3">Category 5</option>
                                        <option value="Category 4">Category 4</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Multi-Value Select</label>
                                <div class="col-md-9">
                                    <select class="form-control" multiple>
                                        <optgroup label="NFC EAST">
                                            <option>Dallas Cowboys</option>
                                            <option>New York Giants</option>
                                            <option>Philadelphia Eagles</option>
                                            <option>Washington Redskins</option>
                                        </optgroup>
                                        <optgroup label="NFC NORTH">
                                            <option>Chicago Bears</option>
                                            <option>Detroit Lions</option>
                                            <option>Green Bay Packers</option>
                                            <option>Minnesota Vikings</option>
                                        </optgroup>
                                        <optgroup label="NFC SOUTH">
                                            <option>Atlanta Falcons</option>
                                            <option>Carolina Panthers</option>
                                            <option>New Orleans Saints</option>
                                            <option>Tampa Bay Buccaneers</option>
                                        </optgroup>
                                        <optgroup label="NFC WEST">
                                            <option>Arizona Cardinals</option>
                                            <option>St. Louis Rams</option>
                                            <option>San Francisco 49ers</option>
                                            <option>Seattle Seahawks</option>
                                        </optgroup>
                                        <optgroup label="AFC EAST">
                                            <option>Buffalo Bills</option>
                                            <option>Miami Dolphins</option>
                                            <option>New England Patriots</option>
                                            <option>New York Jets</option>
                                        </optgroup>
                                        <optgroup label="AFC NORTH">
                                            <option>Baltimore Ravens</option>
                                            <option>Cincinnati Bengals</option>
                                            <option>Cleveland Browns</option>
                                            <option>Pittsburgh Steelers</option>
                                        </optgroup>
                                        <optgroup label="AFC SOUTH">
                                            <option>Houston Texans</option>
                                            <option>Indianapolis Colts</option>
                                            <option>Jacksonville Jaguars</option>
                                            <option>Tennessee Titans</option>
                                        </optgroup>
                                        <optgroup label="AFC WEST">
                                            <option>Denver Broncos</option>
                                            <option>Kansas City Chiefs</option>
                                            <option>Oakland Raiders</option>
                                            <option>San Diego Chargers</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Street</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control"> </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">City</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control"> </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">State</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control"> </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Post Code</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control"> </div>
                            </div>
                            <div class="form-group last">
                                <label class="control-label col-md-3">Country</label>
                                <div class="col-md-9">
                                    <select class="form-control"> </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END FORM-->
                </div>
            </div>
        </div>

           <div class="selectData_foot">
               <ul class="nav nav-pills">
                   <li class="active">
                       <a href="#tab_2_1" data-toggle="tab"> <i class="fa fa-th"></i> </a>
                   </li>
                   <li>
                       <a href="#tab_2_2" data-toggle="tab"> <i class="fa fa-list"></i> </a>
                   </li>
               </ul>
                  <div class="selectData_foot_right">
                      <span class="foot_item_total">共<b>×</b>条</span>
                      <button class="btn grey-mint btn-outline sbold uppercase">count</button>
                      <span class="foot_item">第<b>×</b>条于第<b>×</b>页</span>
                      <button class="btn grey-mint btn-outline sbold uppercase"><i class="fa fa-angle-double-left"></i></button>
                      <button class="btn grey-mint btn-outline sbold uppercase last_btn"><i class="fa fa-angle-double-right"></i></button>
                  </div>
           </div>
    </div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/layui/layui.all.js"></script>
<script src="../assets/custom/js/filter_page.js"></script>
<script>

    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'test.json'
         //   ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id',width: 100, title: 'C1', sort: true, class : 'fa fa-check'}
                ,{field:'username',width: 100, title: 'C2'}
                ,{field:'sex', width: 100, title: 'C3'}
                ,{field:'city', width: 100, title: 'C4'}//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
            ]],
            done : function(){
                $('th[data-field="id"]').children().prepend('<i style="color: #95A5A6;">123</i><i class="icon-key"></i>&nbsp;');
                $('th[data-field="username"]').children().prepend('<i style="color: #95A5A6;">abc</i><i style="color: #95A5A6;">T/N</i>&nbsp;');
                $('th[data-field="sex"]').children().prepend('<i class="icon-calendar"></i>&nbsp;');
                $('th[data-field="city"]').children().prepend('<i style="color: #95A5A6;">0101</i>&nbsp;');
                $('.layui-table').css('width','100%');

                $('.selectData_table .layui-table').on('click','tr',function(){
                    $(this).addClass('bg_fEight').siblings().removeClass('bg_fEight')
                })
            }
        });

        //开启监听
        table.on('checkbox(id)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });
    });

    $('.nav_Filter').click(function(){
        $('.selectData_filter').toggleClass('selectData_filterShow');
    });

    var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight=200, prevDis = 200;
    $("#expander")
            .mousedown(function(e){
                src_posi_Y = e.pageY;
                is_mouse_down = true;
            });
    $(document).bind("click mouseup",function(e){
        if(is_mouse_down){
            is_mouse_down = false;
        }
        prevDis = destHeight
    })
            .mousemove(function(e){

                var field_items_h = $('.selectData_filter').height() - $('.field_tools').height() - 6;
                $('.field_items').css('max-height',field_items_h);
                if(is_mouse_down){
                    dest_posi_Y = e.pageY;
                    move_Y = dest_posi_Y - src_posi_Y;
                    // src_posi_Y = dest_posi_Y;
                    destHeight =    move_Y+prevDis;
                    if(destHeight>400){
                        destHeight = 400
                    }else if(destHeight < 200){
                        destHeight = 200
                    }
                    $(".selectData_filter").css("height", destHeight)
                }
            });

</script>
</html>